<template>
  <div class="hello">
    <!-- 遮罩加载动画 -->
    <div class="zz" ref="zz" v-if="isshow">
      <!-- 进度条 -->
      <el-col :span="12" :offset="6" class="jdt">
        <el-progress
          :text-inside="true"
          :stroke-width="24"
          :percentage="jdt_ds"
          status="success"
        ></el-progress>
        <!-- 加载中文字 -->
        <h1
          class="animated pulse"
          style="
            animation-iteration-count: infinite;
            animation-duration: 1500ms;
          "
        >
          加载中...
        </h1>
      </el-col>
    </div>

    <!-- 实验界面 -->
    <div class="sy" v-show="issy_show">
      <!-- 水容器 -->

      <!-- 淡水1 -->
      <el-col :span="4" :offset="3" class="freshwater_box1">
        <!-- 容器 -->
        <img src="../assets/pack.png" class="pack" />
        <!-- 水    -->
        <img src="../assets/water.png" alt="water" class="water" ref="water" />
      </el-col>

      <!-- 淡水2 -->
      <el-col :span="4" :offset="3" class="freshwater_box2">
        <!-- 容器 -->
        <img src="../assets/pack.png" class="pack" />
        <!-- 水    -->
        <img src="../assets/water.png" alt="water" class="water" ref="water" />
      </el-col>

      <!-- 盐水 -->
      <!-- 淡水2 -->
      <el-col :span="4" :offset="3" class="brine_box">
        <!-- 容器 -->
        <img src="../assets/pack.png" class="pack" />
        <!-- 水    -->
        <img src="../assets/water.png" alt="water" class="water" ref="water" />
      </el-col>

      <!-- 弹簧测力计 -->

      <!-- 弹簧测力计1 -->
      <el-col
        :span="2"
        :offset="5"
        v-bind:class="[thclj_box1, ifpz]"
        ref="thclj"
      >
        <!-- <div v-bind:class="[thclj_box1, ifpz]"  ref="thclj">  -->
        <!-- 这里的 ref 可以不用？ -->
        <!-- 测力计本身 -->
        <div class="mg_box">
          <img src="../assets/mg.png" alt="mg" class="mg" />
          <!-- 显示读数的层 -->
          <div v-bind:class="[ds, water_zl]"></div>
        </div>
        <!-- 弹簧测力计定位点 -->
        <div class="thclj_pot" ref="thclj_pot"></div>
        <!-- 挂钩 -->
        <img src="../assets/line.png" alt="line" class="line" />
        <!-- </div> -->
      </el-col>

      <!-- 弹簧测力计2 -->
      <el-col
        :span="2"
        :offset="12"
        v-bind:class="[thclj_box2, ifpz]"
        ref="thclj"
      >
        <!-- <div v-bind:class="[thclj_box2, ifpz]" ref="thclj">    -->
        <!-- 这里的 ref 可以不用？ -->
        <!-- 测力计本身 -->
        <div class="mg_box">
          <img src="../assets/mg.png" alt="mg" class="mg" />
          <!-- 显示读数的层 -->
          <div v-bind:class="[ds, water_zl]"></div>
        </div>
        <!-- 弹簧测力计定位点 -->
        <div class="thclj_pot" ref="thclj_pot"></div>
        <!-- 挂钩 -->
        <img src="../assets/line.png" alt="line" class="line" />
        <!-- </div> -->
      </el-col>

      <!-- 弹簧测力计 3  -->
      <el-col
        :span="2"
        :offset="19"
        v-bind:class="[thclj_box3, ifpz]"
        ref="thclj"
      >
        <!-- <div v-bind:class="[thclj_box3, ifpz]" ref="thclj">     -->
        <!-- 这里的 ref 可以不用？ -->
        <!-- 测力计本身 -->
        <div class="mg_box">
          <img src="../assets/mg.png" alt="mg" class="mg" />
          <!-- 显示读数的层 -->
          <div v-bind:class="[ds, water_zl]"></div>
        </div>
        <!-- 弹簧测力计定位点 -->
        <div class="thclj_pot" ref="thclj_pot"></div>
        <!-- 挂钩 -->
        <img src="../assets/line.png" alt="line" class="line" v-drag />
        <!-- </div> -->
      </el-col>
      <!-- 砝码 -->
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      drag: "drag",
      ifpz: "",
      thclj_box1: "thclj_box1",
      thclj_box2: "thclj_box2",
      thclj_box3: "thclj_box3",
      isch: "false", // 判断是否重合

      water_zl: "",
      ds: "ds",

      isshow: true,
      issy_show: false,
      jdt_ds: 0,
    };
  },
  mounted() {
    // 设置进度条动画
    var jdt = setInterval(() => {
      if (this.jdt_ds < 100) {
        this.jdt_ds += 1;
      }
    }, 30);
    setTimeout(() => {
      console.log(1);
      clearInterval(jdt);

      // 设置加载界面不可见 实验界面显示
      this.isshow = false;
      this.issy_show = true;
      console.log(this.issy_show);
    }, 4000);
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.body {
  overflow: hidden;
}
.zz {
  height: 100vh;
  width: 100%;
  z-index: 999;
}
/* 进度条 */
.jdt {
  margin-top: 15%;
}

/* 实验界面 */
.sy {
  width: 100%;
  height: 100vh;
}

/* 水 */

/* 淡水容器1 */
.freshwater_box1 {
  position: relative;
  top: 20vh;
  height: 30vh;
  overflow: hidden;
}
/* 淡水容器2 */
.freshwater_box2 {
  position: relative;
  top: 20vh;
  height: 30vh;
  overflow: hidden;
}

/* 盐水容器 */
.brine_box {
  position: relative;
  top: 20vh;
  height: 30vh;
  overflow: hidden;
}
/* 水效果 */
.pack {
  height: 100%;
  width: 100%;
}
.water {
  position: absolute;
  left: 0%;
  top: 0%;
  width: 130%;
  height: 135%;
  z-index: -999;
  animation: rt 5s linear infinite;
}
/* 水质动画效果 */
@keyframes rt {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-20%);
  }
}

/* 动态添加的样式 */
.ifpz {
  pointer-events: none; /* 使元素不可被点击 */
}

/* 读数的动画效果 */
.water_zl {
  animation: ds 2s;

  /* 让动画定格在最后一帧 */
  animation-fill-mode: forwards;
}
@keyframes ds {
  0% {
    top: -415px;
  }
  100% {
    top: -360px;
  }
}

/* 弹簧测力计样式 */

/* 弹簧测力计1 样式 */
.thclj_box1 {
  position: absolute;
  top: 10px;
  width: 3rem;
  height: 15rem;
  cursor: pointer;
}

/* 弹簧测力计2 样式 */
.thclj_box2 {
  position: absolute;
  top: 10px;
  width: 3rem;
  height: 15rem;
  cursor: pointer;
}

/* 弹簧测力计 3 样式 */
.thclj_box3 {
  position: absolute;
  /* left: 180px; */
  top: 10px;
  width: 3rem;
  height: 15rem;
  cursor: pointer;
}

/* 弹簧测力计定位点 */
.thclj_pot {
  position: relative;
  top: 20%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 5px;
  background-color: brown;
  float: inherit;
}
.mg_box {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.mg {
  width: 100%;
  height: 100%;
  pointer-events: none; /* 使元素不可被点击 */
}
.ds {
  position: relative;
  top: -415px;
  width: 100%;
  height: 100%;
  background-color: brown;
  z-index: -999;
}
.line {
  position: absolute;
  top: 60px;
  left: 25%;
  height: 100%;
  width: 50%;
  pointer-events: none;
  z-index: -100;
}
</style>
